<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="resources/css/app.css" type="text/css" />
    <title>AIOS Visualization</title>
  	<script type="text/javascript" src="resources/js/sencha-touch-all-debug.js" charset="utf-8"></script>
	<script>
		
			Ext.application({
			name: 'AIOS',

			launch: function() {
					Ext.create("Ext.tab.Panel", {
					fullscreen: true,
					tabBarPosition: 'bottom',

					items: [
					        
					        
//************************************ Home ************************************************
						{
							title: 'ホーム',
							iconCls: 'home',
							styleHtmlContent: true,
							scrollable: true,
							listeners: {
								activate: function() {
								

									Ext.data.JsonP.request({
										url: 'http://153.121.40.23:8080/aios-api/aios/api/GetCurrentPower.php',
										method: 'POST',
										callbackkey: 'callback',
										params: {
											tap_id: 1
										},

										scope: this,      /// fix handler scope

										callback: function (response, value, request) {
											Ext.getCmp('home_w').setHtml('&nbsp'+value.response.electric_power+'W &nbsp');
											Ext.getCmp('home_a').setHtml(value.response.electric_current+'A &nbsp');
											
											
										},

										failure: function (response, request) {
											Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
										}
									});
								}
							},

							items: [
						    
				///////////// Header //////////////		    
						    {
								docked: 'top',
								xtype: 'titlebar',
								title: 'AIOS Visualization',
							}, 
							
							
							{
								xtype: 'fieldset',	
								layout: {
							        type: 'vbox',
							        pack: 'start', 
							        align: 'middle'
						     	},
						     	
								
								
								items: [
								       
				/////////// Button for open present view ///////////////////				        
								{
									xtype: 'button',
									text : '現 在 の 使 用 電 力',
									height: '200px',
									width : '100%',
									style: {
										//background: 'red';
										'font-size': '40px'
									
									},
									handler: function(){
										 document.location.href = "app/view/currentView.html"
									}
								},
								

					////////////// Set Current Wattage and Amperage /////////////////	
					
								{
								xtype: 'fieldset',	
								layout: {
							        type: 'hbox',
							        pack: 'start', 
						     	},
								items: [
										{	
										 	xtype: 'label',
										 	id: 'home_w',
										 	html: '', 
										 	 align: 'left',
										 	style: {
												'font-size': '40px'
											},
										},
										{	
										 	xtype: 'label',
										 	html: '', 
										 	 align: 'right',
										 	id: 'home_a',
										 	style: {
												'font-size': '40px'
											}
									},
								        
								        ]},
								] // items
							},
							
							{
								xtype: 'fieldset',	
								layout: {
							        type: 'vbox',
							        pack: 'start', 
							        align: 'middle'
						     	},
						     	instructions: 'Last Update: '+new Date(),
						     	
								items: [
										{	
											 	xtype: 'label',
											 	html: '本日の使用電力量', 
											 	style: {
													'font-size': '40px'
												},
										},
										{	
										 	xtype: 'label',
										 	html: '123.4Wh', 
										 	style: {
												'font-size': '40px'
											}
										}
								        
								        ]}
							
						]},
			
						
						
						
						

//********************************** Day View ***********************************************						
						
						{
							title: '電力見える化',
							iconCls: 'search',
							styleHtmlContent: true,
							scrollable: true,
							listeners: {
								activate: function() {
									 document.location.href = "app/view/dayView.html"
													}
											},

							items: [
							]
						}, 
						
						
						
						
						
//************************************ Statistic View ***************************************						
						{
							title: '制御ログ',
							iconCls: 'plug',
							styleHtmlContent: true,
							scrollable: true,
							listeners: {
								activate: function() {
									 document.location.href = "app/view/statisticView.html"
													}
											},

							items: [
								
							]
						},
						
						
						
						
						
		
//******************************** Statistic with chart View *************************************						
						{
							title: '統計',
							iconCls: 'chart',
							styleHtmlContent: true,
							scrollable: true,
							listeners: {
								activate: function() {
								

									Ext.data.JsonP.request({
										url: 'http://153.121.40.23:8080/aios-api/aios/api/GetCurrentPower.php',
										method: 'POST',
										callbackkey: 'callback',
										params: {
											tap_id: 1
										},

										scope: this,      /// fix handler scope

										callback: function (response, value, request) {
											var wattComponent = Ext.getCmp('s_watt');
											wattComponent.setValue(value.response.electric_power);
											
											var ampereComponent = Ext.getCmp('s_ampere');
											ampereComponent.setValue(value.response.electric_current);
											
										},

										failure: function (response, request) {
											Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
										}
									});
									
								}
							},

							items: [
							        
					//////////// Header /////////////////		        
									{
										docked: 'top',
										xtype: 'titlebar',
										title: '統計',
									}, 
									

				//////////////// Set Current Wattage and Amperage ///////////////
									{

				 		    			xtype: 'fieldset',
				 		    		 	layout: {
				 		                    type: 'hbox',
				 		                    pack: 'start', 
				 		                   align: 'middle'
				 		                },
				 		    			items: [
				 		    			
				 		    			{	
				 		    				 	xtype: 'label',
				 		    				 	html: '現在の使用電力（全体) - ', 
				 		    			},
				 		    			{
				 		    					xtype: 'textfield',
				 		    					id: 's_watt',
				 		    					label: 'W :',
				 		    				},
				 		    				{
				 		    					xtype: 'textfield',
				 		    					id: 's_ampere',
				 		    					label: 'A :',
				 		    			}]
				 		    		
									}
								
							]
						},
						
						
						
						
						
						
						
//********************************** Settings View ********************************************						
						{
							title: '設定',
							iconCls: 'settings',
							styleHtmlContent: true,
							scrollable: true,
							listeners: {
								activate: function() {
									 document.location.href = "app/view/settingView.html"
													}
											},

							items: [
							]

						}
					]
				});
			}
		});
	</script>

    

 </head>

 <body>
   
 </body>

</html>
